<template>
  <div class="container">
    <!-- 顶部标题 -->
    <el-row class="topContent">
      <el-col :span="16" class="salaryTitle">
        <div>
          <div class="salaryTime">
            <span id="title">
              <i class="icon iconfont iconfanhui1" @click="goBack"></i>
              {{ basicInfo.title }}
            </span>
            <span class="payOffState unPay" id="unPay" style="display: none"
              >待支付</span
            >
            <span class="payOffState annuled" id="annuled" style="display: none"
              >已取消</span
            >
            <span
              class="payOffState payOffWait"
              id="payOffWait"
              style="display: none"
              >待发放</span
            >
            <span class="payOffState issued" id="issued" style="display: none"
              >已发放</span
            >
            <span class="payOffState payFail" id="payFail" style="display: none"
              >发放失败</span
            >
          </div>
          <div class="salaryItem">
            <span class="item" style="display: none"
              >批次ID：
              <span id="batchIdShow"></span>
            </span>
            <span class="item">
              创建时间：
              <span class="createTime" id="createTime">{{
                basicInfo.createTime
              }}</span>
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="alignRight">
        <div id="unPayOperate" style="display: none; padding-top: 20px">
          <el-button
            type="primary"
            round
            @click="toGiveUpPayOff"
            class="cancelPay"
          >
            取消支付
          </el-button>
          <el-button round plain @click="toPay" class="toPay">
            立即支付
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row class="mainCon">
      <el-col :span="24">
        <div class="downloadForm" v-if="payType == 'OFFLINE'">
          <el-link
            @click="downLoad('csSalaryExcel')"
            class="uploadBtn"
            type="primary"
            >下载工资代发授权单</el-link
          >
        </div>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          class="commonTab"
        >
          <el-tab-pane label="工资明细" name="first">
            <!-- 列表 -->
            <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
              <el-form
                :inline="true"
                :model="filterField"
                ref="searchConditions"
              >
                <el-col :lg="8" :xl="6">
                  <el-form-item label="所属部门" class="row-padding-bottom">
                    <el-cascader
                      v-model="organId"
                      :options="orglist"
                      :props="{ checkStrictly: true }"
                      @change="handleChange"
                      clearable
                    ></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :lg="8" :xl="6">
                  <el-form-item label="发放状态" class="row-padding-bottom">
                    <el-select
                      v-model="filterField.payStatus"
                      filterable
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in salaryStateOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <template v-if="advanced">
                  <el-col :lg="8" :xl="6">
                    <el-form-item
                      label="员工确认状态"
                      class="row-padding-bottom"
                    >
                      <el-select
                        v-model="filterField.confirmStatus"
                        filterable
                        placeholder="请选择"
                        clearable
                      >
                        <el-option
                          v-for="item in confirmStatusOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="8" :xl="6">
                    <el-form-item label="姓名" class="row-padding-bottom">
                      <el-input
                        placeholder="请输入姓名"
                        @blur="filterField.name = changeValue($event)"
                        clearable
                        v-model="filterField.name"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 	  	 	                    
                                <el-form-item>
                                    <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchList" class="commonBtn"></el-button>
                                </el-form-item> -->
                </template>
                <el-col :lg="8" :xl="6">
                  <el-form-item label="">
                    <a
                      @click="toggleAdvanced"
                      style="margin-left: 40px; color: #409eff; cursor: pointer"
                      class="btnColor"
                    >
                      {{ advanced ? '收起' : '展开' }}
                      <i
                        :class="
                          advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                        "
                      ></i>
                    </a>
                    <el-button
                      type="primary"
                      icon="icon iconfont iconchazhao1"
                      @click="searchList"
                      class="searchBtn"
                    >
                      <span>搜索</span>
                    </el-button>
                    <el-button
                      class="commonBut saveBtn"
                      icon="icon iconfont icondaochu"
                      @click="exportExcel"
                      style="width: 108px"
                      ><span class="opetareText">导出报表</span></el-button
                    >
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <div class="spacing"></div>
            <div
              ref="tableBox"
              :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
            >
              <el-table
                :data="salaryDetailList"
                v-loading="loading"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                highlight-current-row
                stripe
                style="border: 1px solid #dfe6ec"
              >
                <el-table-column
                  type="index"
                  width="80px"
                  label="序号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="name,idcard,orgName"
                  label="人员"
                  width="230"
                >
                  <template slot-scope="scope">
                    <p>{{ scope.row.name }}</p>
                    <p>{{ scope.row.idcard }}</p>
                    <!-- <p>{{scope.row.orgName}}</p> -->
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.orgName"
                      :columnName="'orgName'"
                    ></copyText>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="attDays"
                  label="考勤天数"
                  align="center"
                  min-width="100px"
                >
                  <template slot-scope="scope">
                    <p>{{ scope.row.attDays ? scope.row.attDays : '0' }}天</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tel"
                  label="手机号"
                  align="center"
                  :formatter="formatTd"
                  min-width="120"
                ></el-table-column>
                <el-table-column
                  prop="bankCardNo"
                  label="银行卡号"
                  align="center"
                  :formatter="formatTd"
                  width="200"
                ></el-table-column>
                <el-table-column
                  prop="shouldPay"
                  label="应发"
                  align="center"
                  min-width="120"
                >
                  <template slot-scope="scope">
                    <p>
                      ￥{{ scope.row.shouldPay ? scope.row.shouldPay : '0' }}
                    </p>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="bankActPay" label="实发工资（元）" align="center" :formatter=formatTd></el-table-column> -->
                <el-table-column prop="shouldPay" label="实发" align="center">
                  <template slot-scope="scope">
                    <p>
                      ￥{{ scope.row.bankActPay ? scope.row.bankActPay : '0' }}
                    </p>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="payStatusName" label="工资发放状态" align="center" :formatter=formatTd></el-table-column> -->
                <el-table-column
                  prop="payStatusName"
                  label="发放状态"
                  align="center"
                  :formatter="formatTd"
                  width="120"
                ></el-table-column>
                <!-- <el-table-column prop="confirmStatusName" label="员工确认状态" align="center" :formatter=formatTd></el-table-column> -->
                <el-table-column
                  prop="confirmStatusName"
                  label="员工确认"
                  align="center"
                  :formatter="formatTd"
                  width="100"
                ></el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注"
                  align="left"
                  :formatter="formatTd"
                  width="230"
                >
                  <template slot-scope="scope">
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.remark"
                      :columnName="'remark'"
                    ></copyText>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="issueRemark" label="发放失败提示" align="center" :formatter=formatTd></el-table-column> -->
                <!-- <el-table-column prop="issueRemark" label="提示" align="center" :formatter=formatTd min-width="45"></el-table-column>  -->
                <el-table-column prop="issueRemark" label="提示" width="230">
                  <template slot-scope="scope">
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.issueRemark"
                      :columnName="'issueRemark'"
                    ></copyText>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="left" fixed="right">
                  <template slot-scope="scope">
                    <div v-if="scope.row.payStatus == 'FAILURE'">
                      <el-button
                        size="small"
                        @click="handleRestart(scope.$index, scope.row)"
                        type="primary"
                        class="saveBtn"
                        >重新发放</el-button
                      >
                    </div>
                    <div
                      v-else-if="
                        scope.row.payStatus == 'NO_ISSUE' &&
                        scope.row.status == 'NO_PAY'
                      "
                    >
                      <el-button
                        size="small"
                        @click="handleEdit(scope.$index, scope.row)"
                        type="primary"
                        class="saveBtn"
                        >修改</el-button
                      >
                    </div>
                    <div v-else>--</div>
                  </template>
                </el-table-column>
                <!-- 表格数据为空时，页面显示 -->
                <div slot="empty" v-show="isShow">
                  <emptyTable emptyText="暂无相关信息"></emptyTable>
                </div>
              </el-table>
              <!-- filterField为搜索条件 -->
              <!-- getTableList为获取子组件的数据 -->
              <Pagination
                ref="pagination"
                @getList="getTableList"
                :filterField="filterField"
                :requestUrl="requestUrl"
                :isPackParams="isPackParams"
              ></Pagination>
            </div>
            <!--重新发放，修改弹框-->
            <el-dialog
              :title="addOrEdit == 0 ? '重新发放' : '修改'"
              :visible.sync="formVisible"
              :close-on-click-modal="false"
              @close="closeDialog"
              custom-class="brand-dialog-min-width"
              width="45%"
              :modal-append-to-body="false"
              :append-to-body="true"
            >
              <el-form
                :model="formData"
                label-width="80px"
                :rules="formRules"
                ref="formData"
              >
                <el-form-item label="人员姓名" class="row-padding-bottom">
                  <el-input v-model="formData.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" class="row-padding-bottom">
                  <el-input v-model="formData.idcard" disabled></el-input>
                </el-form-item>
                <el-form-item
                  label="手机号"
                  prop="tel"
                  class="row-padding-bottom"
                >
                  <el-input v-model="formData.tel"></el-input>
                </el-form-item>
                <el-form-item
                  label="工资卡号"
                  prop="bankCardNo"
                  class="row-padding-bottom"
                >
                  <el-input v-model="formData.bankCardNo"></el-input>
                </el-form-item>
                <el-form-item
                  label="应发工资（元）"
                  prop="shouldPay"
                  class="row-padding-bottom"
                >
                  <el-input v-model="formData.shouldPay" disabled></el-input>
                </el-form-item>
                <el-form-item label="备注" class="row-padding-bottom">
                  <el-input
                    type="textarea"
                    placeholder="如应发工资超过2万，可进行备注"
                    v-model="formData.remark"
                    maxlength="200"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click.native="handleClose" class="cancel"
                  >取消</el-button
                >
                <!-- 重新发放 -->
                <el-button
                  type="primary"
                  v-show="addOrEdit == 0"
                  @click.native="restartInfoSubmit"
                  class="save"
                  :loading="isSaveLoading"
                  >确定</el-button
                >
                <!-- 修改 -->
                <el-button
                  type="primary"
                  v-show="addOrEdit == 1"
                  @click.native="updateInfoSubmit"
                  class="save"
                  :loading="isSaveLoading"
                  >确定</el-button
                >
              </div>
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="代发进展" name="second" v-if="secondTab">
            <!-- 代发结果 -->
            <el-row class="payOffInfo">
              <!-- 已发放 -->
              <div id="issuedContent" style="display: none">
                <i
                  class="icon iconfont iconyiqueren"
                  style="font-size: 30px; color: #009588"
                ></i>
                <span class="payOffResult">代发结果：</span>
                <span class="payOffInfoState" style="color: #009588"
                  >已发放</span
                >
              </div>
              <!-- 发放失败 -->
              <div id="payFailContent" style="display: none">
                <i
                  class="icon iconfont iconshibai1"
                  style="font-size: 30px; color: #e02020"
                ></i>
                <span class="payOffResult">代发结果：</span>
                <span class="payOffInfoState" style="color: #e02020"
                  >发放失败</span
                >
              </div>
              <div id="payOffInfoProgress" style="display: none">
                <el-col :span="8">
                  <div class="">
                    <ul class="payOffDetailItem">
                      <li>
                        应发总额：
                        <span class="information"
                          >￥
                          <span id="shouldPay">{{
                            basicInfo.shouldPay || '--'
                          }}</span>
                        </span>
                      </li>
                      <li>
                        实发总额：
                        <span class="information"
                          >￥
                          <span id="realPay">{{
                            basicInfo.realPay || '--'
                          }}</span>
                        </span>
                      </li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="">
                    <ul class="payOffDetailItem">
                      <li>
                        应发人数：
                        <span class="information" id="shouldCount">{{
                          basicInfo.realPay || '--'
                        }}</span>
                      </li>
                      <li>
                        实发人数：
                        <span class="information" id="realCount">{{
                          basicInfo.realPay || '--'
                        }}</span>
                      </li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="">
                    <ul class="payOffDetailItem">
                      <li>
                        已支付手续费
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="预缴代发手续费（0.8*应发人数）+银联支付手续费（10 元）"
                          placement="top"
                        >
                          <i
                            class="icon iconfont iconhuabanfuben"
                          ></i> </el-tooltip
                        >：
                        <span class="information"
                          >￥
                          <span id="shouldPoundageTotal">{{
                            basicInfo.shouldPoundageTotal || '--'
                          }}</span>
                        </span>
                      </li>
                      <li>
                        实收手续费
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="实收代发手续费（0.8*实发人数）+银联支付手续费（10 元）"
                          placement="top"
                        >
                          <i
                            class="icon iconfont iconhuabanfuben"
                          ></i> </el-tooltip
                        >：
                        <span class="information"
                          >￥
                          <span id="realPoundageTotal">{{
                            basicInfo.realPoundageTotal || '--'
                          }}</span>
                        </span>
                      </li>
                    </ul>
                  </div>
                </el-col>
              </div>
            </el-row>
            <!-- 待发放 -->
            <div
              id="payOffWaitContent"
              class="payOffWaitContent"
              style="display: none"
            >
              <i
                class="icon iconfont icondengdai"
                style="font-size: 30px; color: #67ace4"
              ></i>
              <span class="payOffResult">代发结果：</span>
              <span class="payOffInfoState">等待发放</span>
              <p>{{ basicInfo.msg }}</p>
            </div>
            <!-- 支付信息 -->
            <div id="payOffInfo" style="display: none">
              <el-row class="payOffTitle">
                <el-col :span="24">支付信息</el-col>
              </el-row>
              <el-row class="payOffInformation" style="margin-bottom: 10px">
                <el-col :span="8">
                  <div class="">
                    <ul class="payOffDetailItem payOffInformationItem">
                      <li class="payOffInformationItemTitle">
                        <i class="icon iconfont iconjinbi"></i>
                        支付总金额
                        <span class="payNumber"
                          >￥
                          <span id="orderTotal">{{
                            basicInfo.payTotal || '--'
                          }}</span>
                        </span>
                      </li>
                      <li class="unionpayCost">
                        代发工资费用
                        <div class="information">
                          共需代发工资：
                          <span
                            >￥
                            <span id="orderShouldPay">{{
                              basicInfo.realPoundageTotal || '--'
                            }}</span>
                          </span>
                        </div>
                      </li>
                      <li class="serviceCharge">
                        手续费
                        <div class="information prepay">
                          预缴代发手续费
                          <el-tooltip placement="top" effect="dark">
                            <div slot="content">
                              代发手续费为预收取，收费为 0.8 元/每人，<br />代发失败部分将原路退回银行卡
                            </div>
                            <i
                              class="icon iconfont iconhuabanfuben"
                            ></i> </el-tooltip
                          >：
                          <span
                            >￥
                            <span id="validFee">{{
                              basicInfo.shouldFixPoundage || '--'
                            }}</span>
                          </span>
                        </div>
                        <div class="information bankpay">
                          银联支付手续费
                          <el-tooltip placement="top" effect="dark">
                            <div slot="content">
                              银联支付手续费为一次性收取，收费为10 元，<br />即便代发失败也不会退回
                            </div>
                            <i
                              class="icon iconfont iconhuabanfuben"
                            ></i> </el-tooltip
                          >：
                          <span
                            >￥
                            <span id="singleFee">{{
                              basicInfo.shouldIssuePoundage || '--'
                            }}</span>
                          </span>
                        </div>
                        <div class="information bankpay">
                          共支付手续费
                          <i class="icon iconfont icon-wenhao bankpayTips"></i
                          >：
                          <span
                            >￥
                            <span id="singleFee">{{
                              basicInfo.shouldPoundageTotal || '--'
                            }}</span>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="">
                    <ul class="payOffDetailItem">
                      <li class="payOffInformationItemTitle">
                        <i class="icon iconfont iconfapiao"></i>
                        交易凭证
                      </li>
                      <li>
                        交易订单号
                        <div class="information" id="orderId">
                          {{ basicInfo.orderId || '--' }}
                        </div>
                      </li>
                      <li>
                        交易流水号
                        <div class="information" id="serialNum">
                          {{ basicInfo.serialNumber || '--' }}
                        </div>
                      </li>
                      <li>
                        支付时间
                        <div class="information" id="payTime">
                          {{ basicInfo.payTime || '--' }}
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="">
                    <ul class="payOffDetailItem">
                      <li class="payOffInformationItemTitle">
                        <i class="icon iconfont iconwenti"></i>
                        常见问题
                      </li>
                      <li>
                        如您需要银联代发手续费的发<br />票，可联系银联北京商务客服<br />电话：95534
                      </li>
                      <li>
                        请勿重复支付，如您重复支付<br />或退款可联系北京商务客服电<br />话：95534
                      </li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- 已取消 -->
            <div style="display: none" id="annuledContent">
              <el-row class="payOffInfoCancel">
                <p>工资表已取消</p>
                <p>
                  {{ basicInfo.msg }}
                  <!-- 如您在撤销工资表之前就支付了款项，请联系银联退款，银联北京商务客服电话：95534 -->
                </p>
              </el-row>
              <el-row class="noDataInfo">
                <img src="../../../static/img/noDataInfo.png" alt="" />
              </el-row>
            </div>
            <!-- 待支付 -->
            <div style="display: none" id="unPayContent">
              <el-row class="payOffInfoCancel">
                <p>工资表尚未支付</p>
                <p>
                  {{ basicInfo.msg }}
                  <!-- 请使用公司工资专户【工商银行 43288******4576】支付款项 -->
                </p>
              </el-row>
              <el-row class="noDataInfo">
                <img src="../../../static/img/noDataInfo.png" alt="" />
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!-- 下载受理单 -->
    <div
      :style="{
        position: 'absolute',
        top: '1220px',
        display: centerDialogVisible ? 'block' : 'none',
      }"
      id="authorizationSheet"
    >
      <table class="top-left">
        <tr>
          <td colspan="2" class="sheetTitle">工资发放授权单</td>
        </tr>
        <tr>
          <td colspan="2" class="clearfix">
            <div class="tr-left">
              <p>{{ offinePayDate.salaryInfo }}</p>
              <div v-if="isEsUser()" class="tr-left-tip">
                订单生成时间：{{ offinePayDate.createTime || '--' }}
              </div>
              <p>{{ offinePayDate.orderId }}</p>
            </div>
            <div class="tr-right">
              <div class="tr-right-top clearfix">
                <div class="tr-right-code fl">
                  <img class="srcCodeImg" :src="srcCode" alt />
                </div>
                <div class="tr-right-barCode fl">
                  <img class="barCodeCodeImg" :src="barCode" alt />
                </div>
              </div>
              <div class="tr-right-tip">
                提示：通过扫描二维码或条形码可快捷获取工资表订单
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="projectInformation">企业信息</td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            企业名称：{{ offinePayDate.companyName || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            统一社会信用代码：{{ offinePayDate.uscc || '--' }}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">法人姓名：{{ offinePayDate.companyBoss }}</td>
          <td class="tdLeft">
            联系方式：{{ offinePayDate.companyBossTel || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            企业联系人姓名：{{ offinePayDate.transactor || '--' }}
          </td>
        </tr>
        <tr>
          <td colspan="2" class="tdLeft">
            企业本地详细办公地址：{{ offinePayDate.address || '--' }}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">专户账号：{{ offinePayDate.account || '--' }}</td>
          <td class="tdLeft">
            代发总人数：{{ offinePayDate.shouldCount || '--' }}人
          </td>
        </tr>
        <tr>
          <template v-if="isEsUser()">
            <td class="tdLeft">
              专户签约状态：<span
                :style="offinePayDate.signed === 0 ? 'color:red' : ''"
                >{{ offinePayDate.signed === 1 ? '已签约' : '未签约' }}</span
              >
            </td>
            <td class="tdLeft">
              代发总金额：{{ offinePayDate.shouldPay || '--' }}元
            </td>
          </template>
          <template v-else>
            <td colspan="2" class="tdLeft">
              代发总金额：{{ offinePayDate.shouldPay || '--' }}元
            </td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  name: 'salaryDetail',

  data() {
    return {
      activeName: 'first',
      advanced: false,
      secondTab: false,
      salaryStateOptions: [], //工资表状态下拉框
      confirmStatusOptions: [], //员工确认状态
      //工资表基本信息
      basicInfo: {
        title: '',
        createTime: '',
        shouldPay: '', //应发总额 , 共需代发工资
        realPay: '', //实发总额
        shouldCount: '', //应发人数
        realCount: '', //实发人数
        payTotal: '', //支付总额
        shouldPoundageTotal: '', //已支付手续费 、共支付手续费
        realPoundageTotal: '', //实收手续费
        shouldFixPoundage: '', //预缴代发手续费
        shouldIssuePoundage: '', //银联支付手续费
        orderId: '', //交易订单号
        serialNumber: '', //交易流水号
        payTime: '', //支付时间
        msg: '', //待支付信息，待发放时间，已取消
      },
      //表格数据
      salaryDetailList: [],
      requestUrl: 'api-su/salarydetail/base/vo',
      batchId: '', //工资详情id
      payType: '', //代发类型
      salaryId: '', //工资id
      organId: '',
      orglist: [],
      isPackParams: true,
      //搜索条件
      filterField: {
        salaryId: '',
        organId: '',
        payStatus: '',
        confirmStatus: '',
        name: '',
      },
      formVisible: false, //重新发放，修改界面是否显示
      addOrEdit: '', //重新发放——0  edit——1
      formData: {
        //新增编辑界面数据
        salaryDetailId: '',
        name: '',
        idcard: '',
        tel: '',
        bankCardNo: '',
        shouldPay: '',
        remark: '',
      },
      formRules: {
        //表单验证规则
        tel: [
          {
            // required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        bankCardNo: [
          {
            required: true,
            pattern: /^\d{15,19}$/,
            message: '请输入15-19 位纯数字的银行卡号',
            trigger: 'blur',
          },
        ],
      },
      value: [],
      isShow: false, //列表加载
      loading: true,
      srcCode: '',
      barCode: '',
      offinePayDate: '',
      centerDialogVisible: false,
      isSaveLoading: false, // 保存loading
    }
  },
  created() {
    //列表传过来的工资详情id
    this.batchId = this.$route.query.batchId
    this.payType = this.$route.query.payType
    this.salaryId = this.$route.query.salaryId
    this.id = this.$route.query.sequenceCode
    this.filterField.salaryId = this.$route.query.batchId
    // 部门
    this.getOrglist()
    //工资表状态下拉框
    this.getSalaryState()
    // 获取确认状态
    this.getConfirmStatus()
    //获取工资表基本信息
    this.getBatchInfo()
    //初始化表格
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * @description: 下载授权单
     */
    async downLoad() {
      this.centerDialogVisible = true
      this.getBarimage()
      this.getQrimage()
      await this.getNcustxx()
      this.$nextTick(() => {
        this.toAuthorize()
      })
    },
    toAuthorize() {
      this.getPdf('authorizationSheet', '工资代发授权单')
      this.centerDialogVisible = false
    },
    /**
     * @description: 线下代发页面条形码
     */
    getBarimage() {
      const vm = this
      vm.barCode =
        common.commonApi + 'api-su/cs/salary/expand/barimage?info=' + vm.id
    },
    /**
     * @description: 线下代发页面二维码
     */
    getQrimage() {
      const vm = this
      vm.srcCode =
        common.commonApi + 'api-su/cs/salary/expand/qrimage?info=' + vm.id
    },
    goBack() {
      this.$router.push('/home/salary/qySalaryList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //tabs栏切换
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    handleChange(item) {
      var organId = this.organId[this.organId.length - 1]
      this.filterField.organId = organId
    },
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attendance/expand/orgarc',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getSalaryState() {
      this.axios({
        method: 'post',
        url: 'api-su/salarydetail/base/issuestatus',
      })
        .then((response) => {
          this.salaryStateOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getConfirmStatus() {
      this.axios({
        method: 'post',
        url: 'api-su/salarydetail/base/confirmstatus',
      })
        .then((response) => {
          this.confirmStatusOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getBatchInfo() {
      var data = {
        salaryId: this.batchId,
      }
      this.axios({
        method: 'post',
        url: 'api-su/salary/base/payinfo',
        data: data,
      })
        .then((response) => {
          var data = response.data.result
          this.basicInfo.title = data.title
          this.basicInfo.createTime = data.createTime
          this.basicInfo.shouldPay = data.shouldPay
          this.basicInfo.realPay = data.realPay
          this.basicInfo.shouldCount = data.shouldCount
          this.basicInfo.realCount = data.realCount
          this.basicInfo.payTotal = data.payTotal
          this.basicInfo.shouldPoundageTotal = data.shouldPoundageTotal
          this.basicInfo.realPoundageTotal = data.realPoundageTotal
          this.basicInfo.shouldFixPoundage = data.shouldFixPoundage
          this.basicInfo.shouldIssuePoundage = data.shouldIssuePoundage
          this.basicInfo.orderId = data.orderId
          this.basicInfo.serialNumber = data.serialNumber
          this.basicInfo.payTime = data.payTime
          this.basicInfo.msg = data.msg
          // 顶部状态显示
          if (data.status == 'NO_PAY') {
            //待支付显示取消支付/立即支付按钮
            $('#unPay').show()
            $('#unPayContent').show()
            $('#unPayOperate').show()
            $('.payOffInfo').hide()
          } else if (data.status == 'CANCELED') {
            // 已取消
            $('#annuled').show()
            $('#annuledContent').show()
            $('.payOffInfo').hide()
          } else if (data.status == 'NO_ISSUE') {
            // 待发放
            // $("#payOffInfoProgress").show();
            $('#payOffWaitContent').show()
            $('#payOffInfo').show()
            $('#payOffWait').show()
            $('.payOffInfo').hide()
          } else if (data.status == 'ISSUED') {
            // 已发放
            $('#payOffInfoProgress').show()
            $('#issuedContent').show()
            $('#payOffInfo').show()
            $('#issued').show()
          } else if (data.status == 'FAILURE') {
            // 发放失败
            $('#payOffInfoProgress').show()
            $('#payFailContent').show()
            $('#payOffInfo').show()
            $('#payFail').show()
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getNcustxx() {
      const vm = this
      var data = {
        id: vm.salaryId,
      }
      return vm
        .axios({
          method: 'post',
          url: 'api-su/salary/expand/ncustxx',
          data: data,
        })
        .then((response) => {
          vm.offinePayDate = response.data.result
        })
        .catch((error) => {
          vm.$message.error('数据获取失败')
        })
    },
    getTableList(data) {
      this.salaryDetailList = data
      this.loading = false
      if (this.salaryDetailList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    // 导出
    exportExcel() {
      if (this.salaryDetailList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-su/salary/expand/export?salaryId=' +
          this.batchId +
          '&organId=' +
          this.filterField.organId +
          '&payStatus=' +
          this.filterField.payStatus +
          '&confirmStatus=' +
          this.filterField.confirmStatus +
          '&name=' +
          this.filterField.name +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'error',
          message: '无数据导出',
        })
      }
    },
    // 显示修改弹框
    handleEdit(index, row) {
      this.formVisible = true
      this.addOrEdit = 1
      this.formData = Object.assign({}, row)
    },
    //显示重新发放弹框
    handleRestart(index, row) {
      this.formVisible = true
      this.addOrEdit = 0
      this.formData = Object.assign({}, row)
    },
    //重新发放弹窗保存
    restartInfoSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.editPayInfo('api-sp/unionpay/reissue', 'reissue')
        } else {
          return false
        }
      })
    },
    //修改弹窗保存
    updateInfoSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.editPayInfo('api-su/salary/expand/modifydetail', 'edit')
        } else {
          return false
        }
      })
    },
    //保存编辑工资信息
    editPayInfo(url, type) {
      var params = {
        salaryId: this.batchId,
        detailId: this.formData.salaryDetailId,
        name: this.formData.name,
        idcard: this.formData.idcard,
        tel: this.formData.tel,
        bankCard: this.formData.bankCardNo,
        shouldPay: this.formData.shouldPay,
        remark: this.formData.remark,
      }
      if (type == 'reissue') {
        var data = {
          params: this.packageParams(params),
        }
      } else if (type == 'edit') {
        var data = params
      }

      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.$refs['formData'].resetFields()
            this.formVisible = false
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
          this.isSaveAgainLoading = false
        })
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['formData'].resetFields()
    },
    // 弹框取消
    handleClose() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    // 是否取消支付
    toGiveUpPayOff() {
      this.$confirm(
        '取消支付后, 工资表的流程将终止,变为已取消状态，是否确定取消',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.giveUpPayOff()
        })
        .catch(() => {})
    },
    //取消支付
    giveUpPayOff() {
      this.axios({
        method: 'post',
        url: 'api-sp/unionpay/cancel',
        data: {
          salaryId: this.batchId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '取消支付成功',
              type: 'success',
            })
            //需要刷新下当前页面，具体逻辑待定
            //获取工资表基本信息
            this.getBatchInfo()
            $('#unPayOperate').hide()
            $('#unPay').hide()
            //初始化表格
            this.$nextTick(function () {
              this.$refs.pagination.getTableListData()
            })
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    //立即支付
    toPay() {
      this.$router.push({
        path: '/home/salary/paySalary',
        name: 'paySalary',
        query: {
          salaryId: this.batchId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.mainCon {
  padding: 0;
}
.topContent {
  background: #fff;
  // height: 93px;
  border-bottom: 1px solid #e3e7e9;
  padding: 16px 24px;
  .alignRight {
    text-align: right;
  }
}
/* 主标题 */
.salaryTitle .salaryTime #title {
  font: bold 18px Microsoft YaHei;
  color: #333;
  margin-bottom: 6px;
  vertical-align: middle;
  .iconfanhui1 {
    font-size: 20px;
    margin-right: 6px;
    cursor: pointer;
  }
}

.salaryTitle .payOffState {
  font-size: 12px;
  padding: 2px 4px;
  margin-left: 10px;
  font-weight: normal;
}

/* 失败 */
.salaryTitle .payFail {
  border: 1px solid #d41212;
  color: #d41212;
  background: #f6e6e7;
}

/* 待发放 */
.salaryTitle .payOffWait {
  border: 1px solid #5db2ff;
  color: #5db2ff;
  background: #e3f0fc;
}

/* 已发放 */
.salaryTitle .issued {
  border: 1px solid #fe9900;
  color: #fe9900;
  background: #fbf1e0;
}

/* 待支付 */
.salaryTitle .unPay {
  border: 1px solid #fe9900;
  color: #fe9900;
  background: #fbf1e0;
}

/* 已撤销 */
.salaryTitle .annuled {
  border: 1px solid #a0a0a0;
  color: #a0a0a0;
  background: #e5e5e5;
}

.salaryItem {
  margin-top: 8px;
  line-height: 14px;
  .item {
    margin-left: 30px;
    margin-right: 30px;
    color: #999;
    font-size: 14px;
    // position: relative;
    // &::before {
    //     content: "·";
    //     position: absolute;
    //     font-size: 36px;
    //     left: -12px;
    //     top: -14px;
    // }
  }
}

/* 已发放表格样式 */
/* 标题中的操作按钮 */
.salaryTitle .buttonBox {
  float: right;
}

.salaryTitle .salaryCommonButton {
  margin-left: 30px;
}
// tab栏切换
.commonTab {
  /deep/ .el-tabs__content {
    background: #fff;
    min-height: 600px;
    padding: 24px 0px;
  }
}
.payOffResult {
  font-weight: bold;
}
// 代发结果
.payOffInfo {
  padding: 20px 0 0 36px;
  min-height: 150px;
  background: #f5f7fa;
  margin-bottom: 10px;
  .payOffInfoState {
    font: bold 18px Microsoft YaHei;
  }
  .payOffDetailItem li {
    font-size: 14px;
    color: #999999;
    padding: 20px 30px 0 36px;
  }
}
// 待发放
.payOffWaitContent {
  display: none;
  min-height: 150px;
  background: #f5f7fa;
  padding: 20px 0 0 36px;
  .payOffInfoState {
    color: #67ace4;
    font-weight: bold;
  }
  & > p {
    text-align: center;
    font-size: 14px;
    color: #333333;
    margin-top: 10px;
  }
}
.payOffInfoCancel {
  min-height: 150px;
  background: #f5f7fa;
  padding-top: 50px;
  text-align: center;
  height: 150px;
  margin-bottom: 10px;
  & > p:first-child {
    font: bold 14px Microsoft YaHei;
    color: #333333;
  }
  & > p:last-child {
    font-size: 14px;
    color: #666666;
    margin-top: 8px;
  }
}
.noDataInfo {
  text-align: center;
  padding-top: 100px;
}
.payOffTitle {
  font-size: 14px;
  color: #999999;
  margin: 20px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dee5f4;
}
.information {
  font-size: 14px;
  color: #151515;
}
.payOffInformation {
  padding: 20px 0 0 40px;
  .payNumber {
    font-size: 20px;
    color: #e02020;
  }
  .payOffDetailItem li {
    line-height: 24px;
    font-size: 14px;
    color: #999999;
    vertical-align: bottom;
    padding: 0 30px 20px 30px;
  }
  .payOffDetailItem li.payOffInformationItemTitle {
    position: relative;
    font: bold 14px Microsoft YaHei;
    color: #333333;
  }
  .iconjinbi,
  .iconwenti,
  .iconfapiao {
    position: absolute;
    left: 4px;
    font-size: 20px;
    color: #999;
  }
  .iconfapiao {
    font-size: 18px !important;
  }
}
// 弹窗样式
.brand-dialog-min-width {
  .el-form-item /deep/ label {
    width: 130px !important;
  }
  .el-form-item /deep/ .el-form-item__content {
    margin-left: 130px !important;
  }
  .el-form-item /deep/ .el-textarea__inner {
    height: 130px;
  }
}
.iconhuabanfuben {
  color: #0070f5;
}

.cancelPay {
  background: #009588;
  border: 1px solid #009588;
  padding: 10px 23px;
  &:hover {
    opacity: 0.8;
  }
}
.toPay {
  color: #009588;
  border: 1px solid #009588;
  padding: 10px 23px;
  background: #e4ebf1;
  &:hover {
    background: rgba(0, 149, 136, 0.1);
    border: 1px solid #009588;
    color: #009588;
  }
}
.downloadForm {
  position: absolute;
  z-index: 999;
  left: 106px;
  top: 15px;
  /deep/ .el-link.el-link--default {
    color: #009588;
    text-decoration: underline;
  }
}
.downshoulidan {
  /deep/ .el-dialog__header {
    padding: 0 !important;
    border-bottom: 0px;
  }
}
#authorizationSheet {
  width: 720px;
  height: 413px;
  text-align: center;
  margin: auto;

  .sheetTitle {
    font-family: SourceHanSansCN-Medium;
    font-size: 24px;
    color: #1f803b;
    background-color: #eaf6ec;
  }

  .top-left {
    width: 720px;
    height: 413px;
    border: 1px solid #1f803b;
    border-collapse: collapse;
    td {
      border: 1px solid #1f803b;
    }
  }
}
.top-title {
  width: 720px;
  height: 33px;
  display: inline-block;
  text-align: right;
}
.tr-left {
  float: left;
  font-family: SourceHanSansCN-Bold;
  font-size: 20px;
  color: #218b3d;
  margin-left: 10px;
  position: relative;
  p:first-child {
    padding: 10px.0;
  }
  p:last-child {
    width: 340px;
    height: 51px;
    line-height: 51px;
    font-family: SourceHanSansCN-Bold;
    font-size: 30px;
    color: #1f803b;
    background: #eaf6ec;
  }
  .tr-left-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #1f803b;
    line-height: 14px;
    position: absolute;
    bottom: -20px;
    left: 10px;
  }
}
.tr-right {
  float: left;
  margin-left: 70px;
  &-top {
    width: 291px;
    // height: 66.4px;
    // margin-top: 10px;
  }
  &-tip {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    color: #333333;
    // margin-top: 10px;
    line-height: 14px;
  }
  &-code {
    width: 100px;
    height: 100px;
  }
  &-barCode {
    width: 160px;
    height: 58px;
    margin-top: 20px;

    margin-left: 17.7px;
  }
}
.projectInformation {
  background: #eaf6ec;
  font-family: SourceHanSansCN-Medium;
  font-size: 14px;
  color: #1f803b;
}
.tdLeft {
  padding-left: 20px;
  text-align: left;
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #1f803b;
}
.srcCodeImg {
  width: 100%;
  height: 100%;
}
.barCodeCodeImg {
  width: 100%;
  height: 100%;
}
</style>
